<%--
  Created by IntelliJ IDEA.
  User: Smile
  Date: 2019/2/20
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>在线考试</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="resources/css/mobile-css/home.css" />
    <!-- Le styles -->
    <link href="resources/css/mobile-css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        td{font-size:60%;}
    </style>
    <link href="resources/css/mobile-css/bootstrap-responsive.css" rel="stylesheet">
    <link rel="shortcut icon" href="<%=basePath%>resources/images/favicon.ico"/>
</head>
<body>
<jsp:include page="mobile-header.jsp"/>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div style="border-bottom: 1px solid #ddd;">
                    <h3 class="title"><i class="fa fa-cloud-upload"></i> 最近发布的考试</h3>
                </div>
                <div class="question-list">
                    <table class="table-striped table">
                        <thead>

                        <tr>
                            <td>考试名称</td><td>开始日期</td><td>截止日期</td><td></td>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${examListToApply }" var="item">
                            <tr>
                                <td>${item.examName }</td>
                                <td><span class="span-info question-number"><fmt:formatDate value="${item.effTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span></td>
                                <td><span class="span-success question-number-2"><fmt:formatDate value="${item.expTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span></td>
                                <td>
                                    <c:choose>
                                        <c:when test="${userId == 0 }">
                                            <a class="btn btn-success btn-sm" href="mobile/mobile-login">申请</a>
                                        </c:when>
                                        <c:otherwise>
                                            <button class="btn btn-success btn-sm join-practice-btn apply-exam-btn" data-id="${item.examId }">申请</button>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                        <tfoot></tfoot>
                    </table>
                </div>
            </div>
            <div class="col-xs-6">
                <div style="border-bottom: 1px solid #ddd;">
                    <h3 class="title"><i class="fa fa-paper-plane-o"></i> 我的考试</h3>

                </div>
                <div class="question-list">
                    <table class="table-striped table">
                        <thead>

                        <tr>
                            <td>考试名称</td><td>开始日期</td><td>截止日期</td><td></td>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${examListToStart }" var="item">
                            <tr>
                                <td>${item.examName }</td>
                                <td><span class="span-info question-number"><fmt:formatDate value="${item.effTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span></td>
                                <td><span class="span-success question-number-2"><fmt:formatDate value="${item.expTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span></td>
                                <td>
                                    <c:choose>
                                        <c:when test="${item.approved == 1 }">
                                            <a href="student/mobile/mobile-exam-start/${item.examId }" class="btn btn-success btn-sm join-practice-btn">参加考试</a>
                                        </c:when>
                                        <c:when test="${item.approved == 3 }">
                                            <a href="student/mobile/mobile-student-answer-sheet/${item.examId }" class="btn btn-success btn-sm join-practice-btn">查看详情</a>
                                        </c:when>
                                        <c:when test="${item.approved == 2 }">
                                            <a class="btn btn-warning btn-sm">已交卷</a>
                                        </c:when>
                                        <c:when test="${item.approved == 0 }">
                                            <a class="btn btn-warning btn-sm">待审核</a>
                                        </c:when>
                                    </c:choose>

                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                        <tfoot></tfoot>
                    </table>

                </div>
                <div style="border-bottom: 1px solid #ddd;">
                    <h3 class="title"><i class="fa fa-paper-plane-o"></i> 模拟考试</h3>

                </div>
                <div class="question-list">
                    <table class="table-striped table">
                        <thead>

                        <tr>
                            <td>考试名称</td><td>开始日期</td><td>截止日期</td><td></td>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${modelTestToStart }" var="item">
                            <tr>
                                <td>${item.examName }</td>
                                <td><span class="span-info question-number"><fmt:formatDate value="${item.effTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span></td>
                                <td><span class="span-success question-number-2"><fmt:formatDate value="${item.expTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span></td>
                                <td>
                                    <a href="student/mobile/mobile-model-test-start/${item.examId }" class="btn btn-success btn-sm join-practice-btn">参加考试</a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                        <tfoot></tfoot>
                    </table>

                </div>
            </div>
        </div>
        <hr>
        <jsp:include page="footer.jsp"/>
    </div>
    <script type="text/javascript" src="resources/js/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".apply-exam-btn").click(function(){
                var examId = $(this).data("id");

                jQuery.ajax({
                    headers : {
                        'Accept' : 'application/json',
                        'Content-Type' : 'application/json'
                    },
                    type : "GET",
                    url : "student/exam/send-apply/" + examId,
                    success : function(message, tst, jqXHR) {
                        if (message.result == "success") {
                            window.location.reload();
                        } else {
                            alert(message.result);
                        }
                    }
                });
            });
        });
    </script>
    <script>
        $(function() {
            bindQuestionKnowledage();
            var result = checkBrowser();
            if (!result) {
                alert("请至少更新浏览器版本至IE8或以上版本");
            }
        });

        function checkBrowser() {
            var browser = navigator.appName;
            var b_version = navigator.appVersion;
            var version = b_version.split(";");
            var trim_Version = version[1].replace(/[ ]/g, "");
            if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
                return false;
            } else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
                return false;
            } else
                return true;
        }

        function bindQuestionKnowledage() {
            $(".knowledge-title").click(function() {
                var ul = $(this).parent().find(".question-list-knowledge");

                if (ul.is(":visible")) {
                    $(this).find(".fa-chevron-down").hide();
                    $(this).find(".fa-chevron-up").show();

                    $(".question-list-knowledge").slideUp();

                } else {
                    $(".fa-chevron-down").hide();
                    $(".fa-chevron-up").show();

                    $(this).find(".fa-chevron-up").hide();
                    $(this).find(".fa-chevron-down").show();

                    $(".question-list-knowledge").slideUp();
                    ul.slideDown();

                }

            });
        }
    </script>
</body>
</html>
